<script lang="ts" setup>
import { getSvg } from "@/utils";
</script>
<template>
  <div class="h-full w-auto center relative">
    <img class="rotate-animation w-95 h-95" :src="getSvg('Frame_580')" alt="" />
    <p
      class="h-40 lh-40 font-bold text-16 text-white not-italic whitespace-nowrap rotate-[-90deg] absolute left-[10px]"
    >
      กรุณาหมุนหน้าจอมือถือของคุณ
    </p>
  </div>
</template>

<style scoped lang="scss">
@keyframes rotateCounterClockwise {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-90deg);
  }
}

.rotate-animation {
  animation: rotateCounterClockwise 2s linear infinite;
}
</style>
